<template>
  <view class="container">
    <!-- 雪花背景 -->
    <canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>
    
    <!-- 页面内容容器 -->
    <view 
      class="content-container"
      @scroll="handleScroll"
      :style="{ height: `${windowHeight}px` }"
    >
      <!-- 搜索栏 -->
      <view class="search-bar">
        <image src="/static/search-icon.png" class="search-icon"></image>
        <input 
          type="text" 
          placeholder="搜索关注的用户" 
          v-model="searchKey"
          @input="onSearchInput"
        />
      </view>
      
      <!-- 关注列表 -->
      <view class="follow-list">
        <view 
          @click="sendMessage(item)"
          class="follow-item" 
          v-for="(item, index) in filteredList" 
          :key="index"
          :style="{ transform: `translateX(${-item.slideX}rpx)` }"
        >
          <!-- 用户信息 -->
          <view class="user-info">
            <view class="avatar-container">
              <image 
                :src="item.avatar || '/static/default-avatar.png'" 
                class="avatar"
              ></image>
              <view class="vip-badge" v-if="item.is_vip>0">VIP</view>
            </view>
            
            <view class="user-details">
              <view class="user-name">
                {{ item.nickname }}
              </view>
              <view class="user-meta">
                <text class="college">{{ item.college || '暂无~'}}</text>
                <text class="follow-time">关注于 {{ item.followTime | formatDate }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 加载更多提示 -->
        <view class="load-more" v-if="loading">
          <image src="/static/loading.gif" class="loading-icon"></image>
          <text>加载中...</text>
        </view>
        <view class="no-more" v-if="noMoreData && followList.length > 0">
          <text>没有更多数据了</text>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="followList.length === 0 && !loading">
        <image src="/static/image/que.png" class="empty-icon"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      followList: [],
      actionButtonsWidth: 240,
      startX: 0,
      activeIndex: -1,
      snowflakes: [],
      snowCanvas: null,
      canvasWidth: 0,
      canvasHeight: 0,
      windowHeight: 0,
      loading: false,
      noMoreData: false,
      currentPage: 1,
      pageSize: 10
    };
  },
  
  computed: {
    filteredList() {
      if (!this.searchKey.trim()) return this.followList;
      
      const keyword = this.searchKey.trim().toLowerCase();
      return this.followList.filter(item => 
        item.nickname.toLowerCase().includes(keyword) || 
        item.college.toLowerCase().includes(keyword)
      );
    }
  },
  
  onLoad() {
    this.getSystemInfo();
    this.getfollows();
  },
  
  onReady() {
    this.initSnowEffect();
  },
  
  onUnload() {
    if (this.snowAnimationId) {
      clearInterval(this.snowAnimationId);
    }
  },
  
  methods: {
    // 获取系统信息
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync();
      this.windowHeight = systemInfo.windowHeight;
    },
    
    async getfollows() {
      if (this.noMoreData) return;
      
      this.loading = true;
      try {
        const res = await this.$api.get('/user/follows', {
          type: 1,
          page: this.currentPage,
          pageSize: this.pageSize
        }, true);
        
        if (res.data.code === 200) {
          const newData = res.data.data.data || [];
          if (newData.length < this.pageSize) {
            this.noMoreData = true;
          }
          
          if (this.currentPage === 1) {
            this.followList = newData;
          } else {
            this.followList = [...this.followList, ...newData];
          }
          
          this.currentPage++;
        }
      } catch (error) {
        console.error('获取关注列表失败:', error);
      } finally {
        this.loading = false;
      }
    },
    
    // 滚动事件处理
    handleScroll(e) {
      if (this.loading || this.noMoreData) return;
      
      const { scrollHeight, scrollTop, clientHeight } = e.detail;
      // 距离底部50px时加载更多
      if (scrollHeight - (scrollTop + clientHeight) < 50) {
        this.getfollows();
      }
    },
    
    initSnowEffect() {
      const systemInfo = uni.getSystemInfoSync();
      this.canvasWidth = systemInfo.windowWidth;
      this.canvasHeight = systemInfo.windowHeight;
      
      this.snowCanvas = uni.createCanvasContext('snow-canvas', this);
      
      for (let i = 0; i < 50; i++) {
        this.snowflakes.push({
          x: Math.random() * this.canvasWidth,
          y: Math.random() * this.canvasHeight,
          radius: Math.random() * 3 + 1,
          speedX: (Math.random() - 0.5) * 0.5,
          speedY: Math.random() * 1.5 + 0.5,
          opacity: Math.random() * 0.8 + 0.2
        });
      }
      
      this.animateSnow();
    },
    
    animateSnow() {
      this.snowCanvas.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      
      this.snowflakes.forEach(flake => {
        flake.x += flake.speedX;
        flake.y += flake.speedY;
        
        if (flake.y > this.canvasHeight) {
          flake.y = 0;
          flake.x = Math.random() * this.canvasWidth;
        }
        
        if (flake.x > this.canvasWidth) {
          flake.x = 0;
        } else if (flake.x < 0) {
          flake.x = this.canvasWidth;
        }
        
        this.snowCanvas.beginPath();
        this.snowCanvas.setFillStyle(`rgba(255, 255, 255, ${flake.opacity})`);
        this.snowCanvas.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
        this.snowCanvas.fill();
      });
      
      this.snowCanvas.draw();
      this.snowAnimationId = requestAnimationFrame(() => this.animateSnow());
    },
    
    handleTouchStart(index) {
      this.startX = event.touches[0].clientX;
      this.activeIndex = index;
      
      this.followList.forEach((item, i) => {
        if (i !== index && item.slideX > 0) {
          this.$set(item, 'slideX', 0);
        }
      });
    },
    
    sendMessage(userId) {
      uni.navigateTo({
        url: `/pagesA/user?id=${userId.user_id}&nickname=${userId.nickname}`
      });
    },
    
    onSearchInput() {
      // 重置分页参数
      this.currentPage = 1;
      this.noMoreData = false;
      this.getfollows();
    },
    
    exploreUsers() {
      uni.navigateTo({
        url: '/pages/discover/users'
      });
    }
  },
  
  filters: {
    formatDate(dateStr) {
      if (!dateStr) return '';
      
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.snow-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.content-container {
  position: relative;
  z-index: 1;
  padding: 30rpx;
  overflow-y: auto;
  box-sizing: border-box;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 24rpx;
  padding: 18rpx 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}

input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  height: 40rpx;
  line-height: 40rpx;
}

input::placeholder {
  color: #999;
}

.follow-list {
  margin-bottom: 20rpx;
}

.follow-item {
  position: relative;
  margin-bottom: 20rpx;
  overflow: hidden;
  border-radius: 20rpx;
  transition: transform 0.3s ease;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
}

.user-info {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
}

.avatar-container {
  position: relative;
  width: 96rpx;
  height: 96rpx;
  margin-right: 24rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.vip-badge {
  position: absolute;
  bottom: -4rpx;
  right: -4rpx;
  background-color: #FFD700;
  color: #333;
  font-size: 20rpx;
  font-weight: bold;
  padding: 2rpx 8rpx;
  border-radius: 12rpx;
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.user-name text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  max-width: 360rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-meta {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.college {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.college::before {
  content: '';
  width: 8rpx;
  height: 8rpx;
  background-color: #409EFF;
  border-radius: 50%;
  margin-right: 8rpx;
}

.follow-time {
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.empty-icon {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

/* 加载更多样式 */
.load-more, .no-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #999;
}

.loading-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}

.explore-btn {
  background-color: #409EFF;
  color: #fff;
  height: 100rpx;
  font-size: 28rpx;
  padding: 16rpx 40rpx;
  border-radius: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.3);
}
</style>